﻿<!doctype html>
  <meta charset="UTF-8">
  <head>
     <style type="text/css">
	    :empty{
		   background-color:yellow;
		}
		:target{
		   background-color:yellow;
		}
        li:nth-child(odd){
		   background-color:yellow;
		}
		li:nth-child(even){
		   background-color:skyblue;
		}
		li:only-child{
		   background-color:yellow;
		}
		a:hover{
		    text-decoration:none;
		}
		input[type="text"]:focus{
		    background-color:skyblue;
		}
		h2:before{
		  content:'阳春三月'counter(myCounter);
		}
		h2.sample:before{
		   content:none;
		}
		h2{
		  counter-increment:myCounter;
		}
		
		div{
		  width:300px;
		  //background-color:yellow;
		  -webkit-transform:rotate(45deg);
		  -moz-transform:rotate(45deg);
		}
	 </style>
  </head>
  <body>
    <table>
	<tr>
	   <td>西安</td>
	   <td>南郊</td>
	</tr>
	<tr>
	   <td>咸阳</td>
	   <td></td>
	</tr>
	</table>
	
	<p>点击输入数据
	地址：<input type="text">
	<p/>对元素的子元素奇偶数进行样式的使用
	<ul>
	  <li>123</li>
	  <li>234</li>
	  <li>345</li>
	  <li>567</li>
	  <li>678</li>
	</ul>
	<ul>
	  <li>我是唯一的</li>
	</ul>
	<p>target选择器样式
	<p id="menu">
	<a href="#text1">示例文字1</a>|
	<a href="#text2">示例文字2</a>|
	<a href="#text3">示例文字3</a>|
	</p>
	<div id="text1">
	<h2>此处省略1万字</h2>
	<p>.....1....</p>
	</div>
	<div id="text2">
	<h2>此处省略1万字</h2>
	<p>.....2....</p>
	</div>
   <div id="text3">
	<h2 class="sample">此处省略1万字</h2>
	<p>.....3....</p>
	</div>
  </body>
</html>